<h1 id="title" class="title">登录</h1>
<p class="sub-title">欢迎来到食品溯源系统.</p>

<form (ngSubmit)="login()" #form="ngForm" aria-labelledby="title">

  <div class="form-control-group">
    <label class="label" for="input-account">账号:</label>
    <input nbInput
           fullWidth
           [(ngModel)]="user.account"
           #account="ngModel"
           name="account"
           id="input-account"
           placeholder="账号"
           autofocus
           [required]="getConfigValue('forms.validation.email.required')"
           [attr.aria-invalid]="account.invalid && account.touched ? true : null">
    <ng-container *ngIf="account.invalid && account.touched">
      <p class="error-message" *ngIf="account.errors?.required">
        请填写账号
      </p>
    </ng-container>
  </div>

  <div class="form-control-group">
    <label class="label" for="input-password">密码:</label>
    <input nbInput
           fullWidth
           [(ngModel)]="user.password"
           #password="ngModel"
           name="password"
           type="password"
           id="input-password"
           placeholder="密码"
           [status]="password.dirty ? (password.invalid  ? 'danger' : 'success') : ''"
           [required]="getConfigValue('forms.validation.password.required')"
           [minlength]="getConfigValue('forms.validation.password.minLength')"
           [maxlength]="getConfigValue('forms.validation.password.maxLength')"
           [attr.aria-invalid]="password.invalid && password.touched ? true : null">
    <ng-container *ngIf="password.invalid && password.touched ">
      <p class="error-message" *ngIf="password.errors?.required">
        请填写密码
      </p>
      <p class="error-message" *ngIf="password.errors?.minlength || password.errors?.maxlength">
        密码应该
         {{ getConfigValue('forms.validation.password.minLength') }}
        到{{ getConfigValue('forms.validation.password.maxLength') }}
        位
      </p>
    </ng-container>
  </div>

  <div class="form-control-group">
    <label class="label">身份:</label>
    <div class="form-check form-check-inline">
      <label class="custom-control custom-radio">
        <input type="radio" class="custom-control-input" name="auth" value="2" [(ngModel)]='user.auth' #auth="ngModel" required>
        <span class="custom-control-indicator"></span>
        <span class="custom-control-description">公司账户</span>
      </label>
    </div>
    <div class="form-check form-check-inline">
      <label class="custom-control custom-radio">
        <input type="radio" class="custom-control-input" name="auth" [(ngModel)]='user.auth' value="1">
        <span class="custom-control-indicator"></span>
        <span class="custom-control-description">管理员</span>
      </label>
    </div>
  </div>

  <div class="form-control-group accept-group">
    <nb-checkbox name="rememberMe" [(ngModel)]="user.rememberMe" *ngIf="rememberMe">记住登录状态</nb-checkbox>
    <a class="forgot-password" routerLink="../request-password">忘记密码?</a>
  </div>

  <button nbButton
          fullWidth
          status="success"
          [disabled]="submitted || !form.valid"
          [class.btn-pulse]="submitted">
    登录
  </button>
</form>


<section class="another-action" aria-label="Register">
  没有账号？ <a class="text-link" routerLink="../register">联系我们</a>
</section>
